<template>
  <div class="shareBox">
    分享到：
    <div class="hover-pointer" @click="shareToMicroblog()">
      <img src="@/static/img/share_icon/weibo.png" alt="" />
    </div>
    <div class="qqIcon hover-pointer" @click="shareToQQRom()">
      <img src="@/static/img/share_icon/QQKJ.png" alt="" />
    </div>
    <div class="hover-pointer" @click="shareToWeChat()">
      <img src="@/static/img/share_icon/weixin.png" alt="" />
    </div>
  </div>
</template>

<script>
import { toQQzone, toQQ, toWeibo, toWechat } from '@/utils/share.js'
export default {
  props: ["sysInfo"],  //父组件传过来的文章数据
  data() {
    return {
      shareUrl: location.href,
    };
  },
  methods: {
    /**
     * 分享到微博
     */
    shareToMicroblog() {
      // console.log(this.sysInfo)
      // //跳转地址
      // window.open(
      //   "https://service.weibo.com/share/share.php?url=" +
      //     encodeURIComponent(this.shareUrl) +
      //     "&title=" +
      //     this.sysInfo.title
      // );
      toWeibo(this.shareUrl, this.sysInfo.title);
    },
    /**
     * 分享到qq空间
     */
    shareToQQRom() {
      console.log(window.QZONE)
      // const options = {
      //   url: this.shareUrl, // 填写要分享的链接
      //   title: this.sysInfo.title, // 填写要分享的标题
      //   summary: '分享的摘要', // 填写要分享的摘要
      //   pics: '分享的图片链接', // 填写要分享的图片链接
      // };
      const shareUrl = this.shareUrl; // 填写要分享的链接
      const shareTitle = this.sysInfo.title; // 填写要分享的标题
      const shareSummary = '分享的摘要'; // 填写要分享的摘要
      const sharePics = '分享的图片链接'; // 填写要分享的图片链接

      const qzoneShareUrl = `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=${encodeURIComponent(
        shareTitle
      )}&summary=${encodeURIComponent(
        shareSummary
      )}&pics=${encodeURIComponent(sharePics)}`;

      window.open(qzoneShareUrl, '_blank');
    },
    /**
     * 分享到微信：需要单独画页面
     */
    shareToWeChat() {
      localStorage.setItem("shareUrl", this.shareUrl); // 存储当前页面地址，前端页面直接根据URL链接生成二维码
      let url = location.href.split("#")[0] + "#/Share/toWechat"; // 注意：#/Share/toWechat: 自己定义的路由
      window.open(url);
    },
  },
};
</script>

<style lang="less" scoped>
.shareBox {
    display: flex;
    justify-content: flex-start;
    line-height: 50px;
  .hover-pointer {
    width: 50px;
    display: inline-block;
    margin-right: 50px;

    img {
        width: 100%;
    }
  }
}
</style>